﻿//载入基础页面
{extend name="common/base" /}

//页面单独CSS
{block name="CustomCSS"}
<link rel="stylesheet" href="__STATIC__/vendors/css/datatables/datatables.min.css">
<link rel="stylesheet" href="__STATIC__/vendors/js/bootstrap-input/css/fileinput.min.css">

{/block}

//页面单独JS
{block name="CustomJS"}
<script src="__STATIC__/vendors/js/bootstrap-input/js/fileinput.min.js"></script>
<script src="__STATIC__/vendors/js/bootstrap-input/js/locales/zh.js"></script>
<script src="__STATIC__/vendors/js/datatables/datatables.min.js"></script>
<script src="__STATIC__/vendors/js/noty/noty.min.js"></script>
<script>

    (function ($) {
    'use strict';
    // ------------------------------------------------------- //
    // Auto Hide
    // ------------------------------------------------------ //    
        $(function () {
            //定义表格
            var table = $('#table').DataTable({
                ajax: {
                    "url": "{:url('Stock/pastJson')}", //请求数据的后台地址
                    "type": "get",     // ajax的请求方法

                },
                processing: true,
                serverSide: true,
                // serverSideOption:true,
                paging: true,    // 是否开启分页功能(默认开启)
                info: true,      // 是否显示分页的统计信息(默认开启)
                searching:true,  // 是否开启搜索功能(默认开启)
                ordering: true,  // 是否开启排序功能(默认开启)
                language: {
                    "url": "__STATIC__/vendors/js/datatables/cn.json"
                },
                lengthMenu: [
                    [10, 15, 20, -1],
                    [10, 15, 20, "所有"]
                ],//分页数目
                stateSave: true, 
                order: [[ 0, 'desc' ]],
                columns: [
                    {"data": "create_date"},
                    {"data": "deliver_date"},
                    {"data": "age"},
                    {"data": "vehicle"},
                    {"data": "config"},
                    {"data": "color"},
                    {"data": "trim"},
                    {"data": "vin"},
                    {"data": "name"},
                    {"data": null,"render":function(data,type,row,meta){
                        var html = '<div class="btn-group" role="group"><button type="button" class="btn btn-info btn-sm mr-1 mb-2" data-toggle="modal" data-remote="/Stock/read.html?id='+row.id+'" data-target="#detail-modal">详情</button><button type="button" class="btn btn-warning btn-sm mr-1 mb-2"  onclick="returnEdit('+row.id+')">编辑</button><button type="button" class="btn btn-danger btn-sm mr-1 mb-2" onClick="submitDelete('+row.id+')">删除</button></div>'
                        return html;
                    }}
                ],
                columnDefs: [
                    { "orderable": false, "targets": [2,4,5,6,7,8,9]}//禁止排序
                ]
            });
        });

        //切换侧边栏为窄边
        toggle();

    })(jQuery);

    function toggle(){
        if ($(window).outerWidth() > 1200) {
            $('#toggle-btn').toggleClass('active');

            $('.side-navbar').toggleClass('shrinked');
            $('.content-inner').toggleClass('active');

            if ($(window).outerWidth() > 1183) {
                if ($('#toggle-btn').hasClass('active')) {
                    $('.navbar-header .brand-small').hide();
                    $('.navbar-header .brand-big').show();
                } else {
                    $('.navbar-header .brand-small').show();
                    $('.navbar-header .brand-big').hide();
                }
            }

            if ($(window).outerWidth() < 1183) {
                $('.navbar-header .brand-small').show();
            }
        }
    }
 
    //提交删除链接
    function submitDelete(id){
        var n = new Noty({
            type: "error",
            text: '确认需要删除此车辆的信息吗？</br>此操作不可逆转，请慎重操作！ ',
            progressBar : true, 
            timeout: 2500,
            animation: {
                open: "animated bounceInRight",
                close: "animated bounceOutRight"
            },
            buttons: [
                Noty.button('确定', 'btn btn-danger', function () {
                    $.ajax({
                        //请求方式
                        type : "GET",
                        //请求的媒体类型
                        contentType: "application/json;charset=UTF-8",
                        //请求地址
                        url : '{:url('Stock/delete')}?id='+id,
                        //请求成功
                        success : function(result) {
                            if (result == "ok") {
                                //提交成功后调用
                                new Noty({
                                    type: "success",
                                    layout: "topRight",
                                    text: "车辆信息删除成功",
                                    progressBar: true,
                                    timeout: 2500,
                                    animation: {
                                        open: "animated bounceInRight",
                                        close: "animated bounceOutRight"
                                    },
                                    callbacks: {
                                        afterShow: function() {
                                            window.location.reload();
                                        },
                                    }
                                }).show();
                            }else{
                                //提交失败后调用
                                new Noty({
                                    type: "error",
                                    layout: "topRight",
                                    text: "数据删除失败",
                                    progressBar: true,
                                    timeout: 2500,
                                    animation: {
                                        open: "animated bounceInRight",
                                        close: "animated bounceOutRight"
                                    }
                                }).show();
                            }
                        },
                        //请求失败，包含具体的错误信息
                        error : function(e){
                            //提交失败后调用
                            new Noty({
                                type: "error",
                                layout: "topRight",
                                text: "系统错误，请联系管理员",
                                progressBar: true,
                                timeout: 2500,
                                animation: {
                                    open: "animated bounceInRight",
                                    close: "animated bounceOutRight"
                                }
                            }).show();
                            console.log(e.status);
                            console.log(e.responseText);
                        }
                    });
                    n.close();
                }, {id: 'button1', 'data-status': 'ok'}),

                Noty.button('取消', 'btn btn-shadow', function () {
                    n.close();
                })
            ]
        }).show();
    };

    //跳转编辑页面
    function returnEdit(id){
        javascript:window.location.href="{:url('Stock/edit',['type'=>'edit','id'=>''])}"+id;
    }

    //打开detail模态框
    $('#detail-modal').on('hidden.bs.modal', function (e) {
            $(this).find('.modal-body').html(' 等待结果，请稍后...');
            $(this).removeData('bs.modal');
        }).on('show.bs.modal', function (e) {
            var button = $(e.relatedTarget);
            var modal = $(this);
            modal.find('.modal-content').load(button.data("remote"));
        });

</script>
{/block}

//页面名称
{block name="PageName"}
已交付车辆列表
{/block}

//自定义Modal
{block name="Modal"}
<!-- 详情Modal开始 -->
<div id="detail-modal" class="modal fade">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            读取中。。。
        </div>
    </div>
</div>
<!-- 详情Modal结束 -->
{/block}

//主页面
{block name="main"}
<div class="row">
    <div class="col-xl-12">
        <!-- Export -->
        <div class="widget has-shadow">
        	<div class="widget-header bordered no-actions d-flex align-items-center">
                <h2>已交付车辆列表</h2>
            </div>
            <div class="widget-body">
                <div class="table-responsive">
                    <table id="table" class="table mb-0">
                        <thead>
                            <tr>
                                <th>到库时间</th>
                                <th>交付时间</th>
                                <th>库龄</th>
                                <th>车系</th>
                                <th>配置</th>
                                <th>颜色</th>
                                <th>内饰</th>
                                <th>车架号</th>
                                <th>客户</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        
                    </table>
                </div>
            </div>
        </div>
        <!-- End Export -->
    </div>
</div>

<!-- End Centered Modal -->
{/block}

